/* components */
import { AuthTreeNode as AuthTreeNodeComponent } from '@src/modules/account/roleService/component'
import { AuthTreeNode } from '@src/modules/account/roleService/component/AuthTree/model'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/modules/account/roleService/component/AuthTree/index.scss'
/* vue */
import { ComponentInstance, defineComponent, PropType } from 'vue'
import { CreateElement } from 'vue'

export type AuthTreeNodeRenderFunctionType = (h: CreateElement, node: AuthTreeNode) => JSX.Element

export type AuthTreeProps = {
  data: AuthTreeNode[];
  showCheckbox: boolean;
  selected: AuthTreeNode;
  expand: boolean;
}

export interface AuthTreeSetupState {
  
}

export enum AuthTreeEventEnum {
  Input = 'input',
  Submit = 'submit',
}

export type AuthTreeEmitsOptions = {
  input: () => void;
}

export type AuthTreeInstance = ComponentInstance & AuthTreeSetupState
export type AuthTreeVM = AuthTreeSetupState & AuthTreeProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.AuthTree,
  emits: [
    AuthTreeEventEnum.Input,
    AuthTreeEventEnum.Submit,
  ],
  props: {
    data: {
      type: Array as PropType<AuthTreeNode[]>,
      default: () => []
    },
    expand: {
      type: Boolean,
      default: true
    },
    selected: {
      type: Object as PropType<AuthTreeNode>,
      default: () => ({})
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    nodeRender: {
      type: Function as PropType<AuthTreeNodeRenderFunctionType>,
    }
  },
  setup(props: AuthTreeProps, { slots, emit }) {
    
  },
  render() {
    return (
      <div class={ComponentNameEnum.AuthTree}>
        
        {this.data.map(node => {
          return (
            <AuthTreeNodeComponent 
              key={node.id}
              node={node}
              expand={this.expand}
              showCheckbox={this.showCheckbox}
              selected={this.selected}
              nodeRender={this.nodeRender}
            />
          )
        })}
        
      </div>
    ) as any
  }
}) as any
